<!--创建时间：2022/3/31 13:54 描述： -->
<template>
  <view class="console-class">
    <view
      class="head-area"
    >
      <button
        class="tool-button"
        @click="onClearLogs"
      >清空</button>
      <uni-easyinput
        placeholder="过滤类型: info,error,warn,log"
        v-model="filter"
      />
    </view>
    <scroll-view class="scroll" :scroll-y="true" :scroll-top="scrollTop" @scroll="scrollEvent">
      <view v-for="(item,index) in logListFilter" :key="index" :class="'console-text-'+item.type">
        <button
          class="tool-button"
          :class="'console-text-'+item.type"
          @click="copy(item.objects)"
        >复制 日志时间: {{item.time}}</button>
        <view class="console-content">
          {{item.objects}}
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import {ClipboardUtils, getDate} from "../common.js";
export default {
  name: "ComponentsConsole",
  // 定义用到的组件
  components: {},
  // 自定义指令，这里定义局部指令
  directives: {},
  // 过滤器
  filters: {},
  // 定义用到的混入，可以重复使用代码
  mixins:[],
  // 属性定义使用对象的形式进行定义
  // 定义变量
  data() {
    return {
      logList: [],
      scrollTop: 0,
      filter:'',
    }
  },
  // 定义计算属性值，加上watch配合，可以读取vuex异步获取的值
  computed: {
    logListFilter(){
      if(this.filter){
        return this.logList.filter(i=>{
          return i.type.indexOf(this.filter) !== -1
        })
      }
      return this.logList;
    },
    // consoleProps2: {
		//		get(){
		//			//return this.name.split('').reverse().join('');
		//			return this.firstName+''+this.lastName;
		//		},
		//		set(value){
		//		}
    // }
  },
  // 监听属性值的变化
  watch:{
    // consoleProps2: {
    //   handler(value, oldValue) {
    //
    //   },
    //   immediate: true,
    //   deep: true
    // }
  },
  // 生命周期钩子函数begin
  // 在页面节点挂载完执行
  mounted() {
    uni.$on('debugger-refresh-log', () => {
      this.$set(this, 'logList', getDate().debuggerLogData)
    });
  },
  // 在页面创建完执行
  created() {
    this.$set(this, 'logList', getDate().debuggerLogData)
    this.$set(this, 'scrollTop', getDate().srollTop.console)
  },
  // 生命周期钩子函数end
  // 定义方法
  methods: {
    onClearLogs() {
      getDate().debuggerLogData = [];
      this.logList = [];
    },
    copy(val) {
      ClipboardUtils.setClipboardText(val)
    },
    scrollEvent(event) {
      this.scrollTop = event.detail.scrollTop
      getDate().srollTop.console = this.scrollTop
    }
  },
}
</script>
<style scoped lang="scss">
.console-class{
  @import "../common.scss";
  .console-text-log{
  }
  .console-text-error{
    background-color: red;
  }
  .console-text-info{

  }
  .console-text-warn{
    background-color: yellow;
  }
  .console-content {
    border-bottom: 1px black solid;
    margin-bottom: 1px;
  }
}
</style>
